<template>
    <div
        class="up-standard"
        :class="className"
        :style="{ height: height, width: width }"
    ></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'up-standard',
    props: {
        title: {
            type: String
        },
        className: {
            type: String,
            default: 'up-standard'
        },
        width: {
            type: String,
            default: '300px'
        },
        height: {
            type: String,
            default: '300px'
        },
        autoResize: {
            type: Boolean,
            default: true
        },
        data: {
            type: Number
        }
    },
    data () {
        return {
            chart: null,
            isResize: true
        };
    },
    created () {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    mounted () {
       console.log(this.data, 'echarts--');
    //    this.initChart()
    },
    methods: {
        initChart () {
            this.chart = echarts.init(
                document.getElementsByClassName(this.className)[0]
            );
            this.setOptions();
        },
        setOptions ({} = {}) {
            this.chart.setOption({
                title: {
                    text: this.title,
                    left: 'center'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                color: ['#c23531', '#2f4554', '#61a0a8'],
                series: [
                    {
                        name: this.title,
                        type: 'gauge',
                        radius: '80%',
                        center: [150, 170],
                        detail: {
                            formatter: '{value}%',
                            offsetCenter: [0, '52%'],
                            fontSize: 24
                        },
                        data: [
                            {
                                value: +this.data,
                                name: this.title
                            }
                        ],
                        title: {
                            // 仪表盘标题。
                            show: true, // 是否显示标题,默认 true。
                            offsetCenter: [0, '30%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                            color: '#333', // 文字的颜色,默认 #333。
                            fontSize: 16 // 文字的字体大小,默认 15。
                        }
                    }
                ]
            });
            window.onresize = this.chart.resize;
        }
    },
    watch: {
        data (val) {
            this.initChart();
        }
    }
};
</script>

<style scoped></style>
